<template>
  <Row>
    <i-col :span="24">
      <div id="main" style="height: 760px;width: 960px;"></div>
    </i-col>
  </Row>
</template>
<script>
  import {getTruckListByPage, getG7Data, getG7TruckTrajectory} from '@api/backEnd/fleetControl'
  import moment from 'moment'
  import 'echarts/map/js/china.js'
  import 'echarts/extension/bmap/bmap.js'
  import _ from 'lodash'
  // import $ from 'jquery'
  import {MP} from '@components/bmap'

  export default {
    name: 'driverList',
    data () {
      let ak = 'HYPTMfzFtQSrQzrSYd54Lv6OnOsCCexo'
      let stationForm = {
        railwayBureauCode: '',
        transportCenter: '',
        stationCode: ''
      }
      let localPoint = [87.606043, 43.832012]
      let truckList = []
      let datas = {stationForm, ak, localPoint, truckList}
      return datas
    },
    methods: {
      getTruckList () {
        getTruckListByPage({
          pageNumber: 1,
          pageSize: 100000
        }).then(res => {
          if (+res.data.isSuccess === 1) {
            this.truckList = res.data.data.rows
            this.getTruckPositionList()
          }
        })
      },
      drawMap (truckPositionList) {
        console.log(truckPositionList)
        MP(this.ak).then(BMap => {
          if (!BMap) {
            return
          }
          let map = new BMap.Map('main')
          let point = new BMap.Point(87.606043, 43.832012)
          let navigationControl = new BMap.NavigationControl({
            // 靠左上角位置
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_LARGE,
            // 启用显示定位
            enableGeolocation: true
          })
          map.addControl(navigationControl)
          map.centerAndZoom(point, 8)
          map.enableScrollWheelZoom()
          // 编写自定义函数,创建标注
          let addMarker = (points) => {
            for (let i = 0, len = truckPositionList.length; i < len; i++) {
              let sContent =
                // div块不要删除，后面有该id的onload事件
                '<div id="imgDemo"><h4 style="margin:0 0 5px 0;padding:0.2em 0">' + truckPositionList[i].carnum + '</h4>' +
                '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">时间：' + truckPositionList[i].time + '</p>' +
                '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">电话号码：' + truckPositionList[i].timestamp + '</p>' +
                '<p style="margin:0;line-height:1.5;font-size:13px;text-indent:2em">状态/时速：' + truckPositionList[i].status + '</p>' +
                '</div>'
              let point = new BMap.Point(parseFloat(points[i].lng), parseFloat(points[i].lat))
              let marker = new BMap.Marker(point)
              let infoWindow = new BMap.InfoWindow(sContent)
              map.addOverlay(marker)
              marker.addEventListener('mouseover', function () {
                this.openInfoWindow(infoWindow)
                document.getElementById('imgDemo').onload = function () {
                  infoWindow.redraw()
                }
              })
            }
          }
          addMarker(truckPositionList)
        })
      },
      getG7DataOwner () {},
      getG7TruckTrajectoryList () {
        getG7TruckTrajectory({}).then(res => {
          console.log(res)

          let truckPositionList = []
          res.data.data.forEach((item) => {
            // let thisTruckDataList = JSON.parse(item)
            if (item.data) {
              let thisTruckData = _.last(item.data.result)
              truckPositionList.push(thisTruckData)
            }
          })
          // if (+res.data.isSuccess === 1) {
          //   this.truckList = res.data.data.rows
          //   this.getTruckPositionList()
          // }
          this.drawMap(truckPositionList)
        })
      },
      getTruckPositionList () {
        let wakeList = []
        for (let i = 0; i < this.truckList.length; i++) {
          let method = 'truck.truck.getTruckTrajectory'
          let data = {
            'carnum': this.truckList[i].truckNo,
            // 'starttime': moment().subtract(40, 'minutes').format('YYYY-MM-DD HH:mm:ss'),
            'starttime': moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
            'endtime': moment().format('YYYY-MM-DD HH:mm:ss')
          }
          let url = 'http://g7s.api.huoyunren.com/interface/index.php'
          let params = JSON.stringify({method, data})
          let dataAll = {url, params}
          wakeList.push(new Promise((resolve, reject) => {
            getG7Data(dataAll).then(res => {
              if (+res.data.isSuccess === 1) {
                resolve(res.data.data)
              } else {
                reject(new Error('请求失败'))
              }
            })
          }))
        }
        Promise.all(wakeList).then((result) => {
          /* let thisTruckDataList = JSON.parse(res.data)
           if (thisTruckDataList.data) {
           let thisTruckData = _.last(thisTruckDataList.data.result)
           _this.$set(this.truckPositionList, i, thisTruckData)
           // truckPositionList.push(thisTruckData)
           truckInfo[thisTruckData.carnum] = [thisTruckData.lng, thisTruckData.lat]
           truckVal.push({name: thisTruckData.carnum, value: 100})
           } */
          let truckPositionList = []
          result.forEach((item) => {
            let thisTruckDataList = JSON.parse(item)
            if (thisTruckDataList.data) {
              let thisTruckData = _.last(thisTruckDataList.data.result)
              truckPositionList.push(thisTruckData)
            }
          })
          this.drawMap(truckPositionList)
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    mounted () {
      // this.getTruckList()
      this.getG7TruckTrajectoryList()
    },
    computed: {},
    watch: {},
    components: {}
  }
</script>
<style scoped>

</style>
